<template>
    <mu-flex justify-content="end">
        <mu-paper class="paper" :zDepth="2">
            <h3>欢迎来到Hydro！</h3>
            <p v-if="!username">初来乍到？请在下面注册/登录</p>
            <div v-else>
                <p>欢迎您，{{username}}！</p>
                <mu-button color="primary" @click="logout">登出</mu-button>
            </div>
            <div id="form-dialogs" v-if="!username">
                <mu-flex justify-content="center">
                    <mu-row gutter>
                        <mu-col> <form-dialog type="login" action="confirm"></form-dialog> </mu-col>
                        <mu-col> <form-dialog type="signup" action="confirm1"></form-dialog> </mu-col>
                    </mu-row>                              
                </mu-flex>
            </div><br/>
        </mu-paper>
    </mu-flex>
</template>

<script>
import formDialog from "./FormDialog.vue";

export default {
    data() {
        return {
            username: ""
        };
    },
    mounted() {
        this.username = this.$cookie.get("username");
    },
    components: {
        formDialog
    },
    methods: {
        logout() {
            this.$cookie.delete("username");
            this.username = null;
        }
    }
};
</script>

<style>
.paper {
    font-family: Arial, Helvetica, sans-serif, "微软雅黑";
    width: 45%;
    text-align: center;
}
</style>
